<template>
    <div v-if="show" class="main">
        <el-row :gutter="10">
            <el-col :span="6">
                <el-select v-model="province" placeholder="选择省份" size="small" @change="proChange()">
                    <el-option
                            v-for="p in proDatas"
                            :key="p.value"
                            :label="p.label"
                            :value="p">
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="6">
                <el-select v-model="city" placeholder="选择市/州" size="small" @change="cityChange()">
                    <el-option
                            v-for="c in cityDatas"
                            :key="c.value"
                            :label="c.label"
                            :value="c">
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="6">
                <el-select v-model="county" placeholder="选择区/县" size="small">
                    <el-option
                            v-for="ct in countyDatas"
                            :key="ct.value"
                            :label="ct.label"
                            :value="ct">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="6" align="center">
                <el-button size="mini" type="primary" @click="backData()">确认</el-button>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    /**
     * 省市区 地区联动
     */
    import areaData from '@/libs/area-data-min.js';

    export default {
        name: "area-ganged",
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                province: null,
                city: null,
                county: null,
                areaData: areaData,
                proDatas: [],//省份数据
                cityDatas: [],//
                countyDatas: [],//
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData() {
                this.areaData.forEach(item => {
                    let d = {
                        label: item.label,
                        value: item.value
                    }
                    this.proDatas.push(d);
                })
            },
            //选择省份
            proChange() {
                this.city = null;
                this.county = null;
                this.cityDatas = this.areaData.find(f => f.value === this.province.value).children;
            },
            //选择省份
            cityChange() {
                this.county = null;
                this.countyDatas = this.cityDatas.find(f => f.value === this.city.value).children;
            },
            //返回数据到父组件 三组选项不都为非空，则返回null
            backData() {
                let result = {
                    labels: `${this.province.label}-${this.city.label}-${this.county.label}`,
                    values: `${this.province.value}-${this.city.value}-${this.county.value}`
                }
                if (this.province == null || this.city == null || this.county == null) {
                    result = null;
                }
                this.$emit('comfirm', result);
            }
        }
    }
</script>

<style scoped lang="scss">
    .main {
        margin-left: 10%;
        margin-bottom: 5%;
        margin-right: 5%;
    }
</style>